<template>
  <div>
    <el-row :gutter="10">
      <el-col :span=18>
        <div class="bg-purple grid-content">
          <el-col :span="12">
            <div v-for="(item, index) in moduleList" v-if="index%2===0">
              <div class="bg-beige grid-content">
                <img :src="item.image_path" alt="图片未找到" class="img-class">
                <span>{{item.name}}</span>
                <p>{{item.type}}</p>
                <p>{{item.describe}}</p>
                <p class="time">最长时间：{{item.long_time}},最短时间：{{item.short_time}}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div v-for="(item, index) in moduleList" v-if="index%2===1">
              <div class="bg-beige grid-content">
                <img :src="item.image_path" alt="图片未找到" class="img-class">
                <span>{{item.name}}</span>
                <p>{{item.type}}</p>
                <p>{{item.describe}}</p>
                <p class="time">最长时间：{{item.long_time}},最短时间：{{item.short_time}}</p>
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
      <el-col :span=6>
        <div class="bg-purple grid-content">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      currentDate: new Date(),
      search_info:"",
      moduleList: [
        {
          describe: "string",
          image_path: "string",
          long_time: "string",
          name: "string",
          place_background: "string",
          recommend_people: "string",
          short_time: "string",
          time_background: "string",
          type: "string",
          room_id:0,
        },
        {
          describe: "string",
          image_path: "string",
          long_time: "string",
          name: "string",
          place_background: "string",
          recommend_people: "string",
          short_time: "string",
          time_background: "string",
          type: "string",
          room_id:0,
        },
      ]
    }
  },
  methods:{},
  created(){
    let param=new URLSearchParams();
    param.append('match',"")
    axios({
      methods: 'get',
      url:axios.defaults.baseURL + 'room/get',
      param:param
    }).then((res) => {
      if(res.data.code==="000000"){
        this.moduleList=[];
        console.log(this.moduleList)

        let get_form=res.data.content;
        get_form.forEach((item,i) => {
          let p;
          try{
            p=require(item.imageUrl);
          }catch (f){
            p=require("../assets/1.jpg")
          }

          let child_form={
            describe: item.descri,
            image_path: p,
            long_time: item.longTime,
            name: item.name,
            place_background: item.placeBackground,
            recommend_people: item.recommendPeople,
            short_time: item.shortTime,
            time_background: item.timeBackground,
            room_id: item.roomid,
            type: item.type
          }
          this.moduleList.push(child_form);
        })
        console.log(get_form)
        console.log(this.moduleList)
      }else{
        this.$message.error(res.data.desc);
      }
    })
  }
}
</script>

<style>
.img-class{
  width: 100px;
  height: 100px;
  display: block;
}
.card-class{
  height: 250px;
  width: max-content;
}
.bg-purple {
  background: #d3dce6;
  opacity: 0.8;
}
.bg-beige {
  min-height: 100px;
  background: beige;
}
.grid-content {
  border-radius: 4px;
  /*min-height: 36px;*/
}
.time {
  text-align: right;
  font-size: 8px;
  color: blueviolet;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>